import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { TabC } from '../../../../comps';
import CardC from '../../Barra/comps/cardC';
import style from './index.less';
import _ from 'lodash';
import CashDetailC from './cashDetailC';
import ReportC from './reportC';
import Bg from '../../../../assets/busi/workStation/Nonstandard/close_bg.png';

@Form.create()
@connect(({ loading, workStationM }) => ({ loading, workStationM }))
export default class ProductAnalysis extends PureComponent {
  state = {
    activeKey: 'cash',
    productCode: undefined,
    status: false, //展开收起标识
  };
  componentDidMount() {
    this.setState({
      status: ['11', '12', '13', '14', '1', '3'].includes(this.props.state) ? false : true,
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.productCode != nextProps.productCode && nextProps.productCode) {
      this.setState({
        productCode: nextProps.productCode,
      });
    }
    if (nextProps.state != this.props.state) {
      this.setState({
        status: ['11', '12', '13', '14', '1', '3'].includes(nextProps.state) ? false : true,
      });
    }
  }

  // tab切换
  childrentabOnclick = (activeKey) => {
    this.setState({ activeKey });
  };

  // 展开收起响应
  onExpendClick = (showContent) => {
    this.setState(
      {
        status: showContent,
      },
      () => {
        this.props.stateOnChange(this.state.status ? 1 : 2);
      },
    );
  };
  //获取 现金流入 现金流出的数据
  getCashData = (cashIn, cashOut) => {
    this.setState({
      cashIn,
      cashOut,
    });
  };
  //获取产品利差
  getReportData = (spread) => {
    this.setState({
      spread: spread != undefined ? (spread * 100).toFixed(2) : spread,
    });
  };

  render() {
    const { status, productCode, cashIn, cashOut, spread } = this.state;
    return (
      <div className={style.mainBox}>
        <div className={style.openBox} style={{ display: status ? 'block' : 'none' }}>
          {/* 展开 */}
          <CardC
            title='产品分析'
            type='13'
            showContent={status}
            onExpendClick={this.onExpendClick}
            titleTip={`${productCode}-${this.props.productName}`}
            content={
              <div className={style.boxContent}>
                <TabC
                  type='secondTab'
                  tabSource={[
                    { title: '现金流', key: 'cash', content: <CashDetailC productCode={productCode} getCashData={this.getCashData} rootId={this.props.rootId} /> },
                    { title: '资负分析报告', key: 'report', content: <ReportC productCode={productCode} getReportData={this.getReportData} /> },
                  ]}
                  activeKey={this.state.activeKey}
                  onChange={this.childrentabOnclick}
                  forceRender
                />
              </div>
            }
          />
        </div>
        <div className={style.closeBox} style={{ display: status ? 'none' : 'block', overflow: 'hidden' }}>
          {/* 收起 */}
          <CardC
            title='产品分析'
            type='13'
            showContent={status}
            onExpendClick={this.onExpendClick}
            titleTip={['11', '12'].includes(this.props.state) ? '' : `${productCode}-${this.props.productName}`}
            content={
              <div>
                <div className={['11', '12'].includes(this.props.state) ? `${style.boxContent} ${style.boxContent1}` : style.boxContent}>
                  <div>
                    <i>未来一年现金流流入</i>
                    <span> {cashIn == 0 ? cashIn : cashIn || '--'} </span>
                    <a>万元</a>
                  </div>
                  <div>
                    <i>现金流流出</i>
                    <span> {cashOut == 0 ? cashOut : cashOut || '--'} </span>
                    <a>万元</a>
                  </div>
                  {spread != undefined ? (
                    <div>
                      <i>产品利差为</i>
                      <span>{spread}</span>
                      <a>%</a>
                    </div>
                  ) : (
                    ''
                  )}
                </div>
                <div className={style.closeBoxbg}>
                  <img src={Bg} />
                </div>
              </div>
            }
          />
        </div>
      </div>
    );
  }
}
